﻿/// <reference path="FileList.ts" />

module UI {

    export class RadioButton extends UIControl {

        public type: string = 'RadioButton';

        public text: string = '';

        public isChecked: boolean = false;

        public onClick: InputEvent = null;

        public onEnter: InputEvent = null;

        public onExit: InputEvent = null;

        public onChecked: InputEvent = null;

        public onUnchecked: InputEvent = null;

        public onCheckedChanged: InputEvent = null;

        constructor(details: any = undefined) {
            super();
            setupControl(this, details);
            this.handleClick = this.handleClickInternal;
        }

        render(context: CanvasRenderingContext2D): void {

            var c = this.computed;

            // Colours based on state
            var stroke = UI.theme.colors.default.outline;
            var fill = this.isChecked ? UI.theme.colors.charm : '#eee';
            var text = UI.theme.colors.default.text;
            if (c.state == ControlState.hover) {
                stroke = UI.theme.colors.charm;
            }
            if (c.state == ControlState.down) {
                stroke = UI.theme.colors.down.outline;
            }
            if (this.enabled === false) {
                stroke = UI.theme.colors.disabled.outline;
                fill = UI.theme.colors.disabled.face;
                text = UI.theme.colors.disabled.text;
            }

            // Some calculations
            var halfHeight = c.height / 2;
            var circleX = (c.left + halfHeight) | 0;
            var circleY = (c.top + halfHeight) | 0;

            // Draw circle
            context.lineWidth = 2;
            context.strokeStyle = stroke;
            context.beginPath();
            context.arc(circleX, circleY, halfHeight, 0, 2 * Math.PI, false);
            context.closePath();
            context.stroke();

            // Draw checked state
            if (this.isChecked) {
                context.fillStyle = fill;
                context.beginPath();
                context.arc(circleX, circleY, halfHeight - 4, 0, 2 * Math.PI, false);
                context.closePath();
                context.fill();
            }

            // Caption
            context.textBaseline = 'middle';
            context.textAlign = 'left';
            context.font = UI.theme.fonts.normal;
            context.fillStyle = text;
            context.fillText(this.text, c.left + c.height + 6, c.middle);
        }

        handleClickInternal(sender: UI.UIControl, e: UI.InputArgs) {

            // Ensure all other radio buttons become unchecked
            var parentContainer = UI.getControlParent(UI.root, this);
            for (var i in parentContainer.controls) {
                var element = parentContainer.controls[i];
                if (element.type == 'RadioButton') {
                    var radioButton = <UI.RadioButton>element;
                    if (radioButton != this && radioButton.isChecked) {
                        radioButton.isChecked = false;
                        if (this.onUnchecked !== undefined && this.onUnchecked !== null) this.onUnchecked(this, e);
                        if (this.onCheckedChanged !== undefined && this.onCheckedChanged !== null) this.onCheckedChanged(this, e);
                    }
                }
            }

            // Set checked
            this.isChecked = true;
            if (this.onChecked !== undefined && this.onChecked !== null) this.onChecked(this, e);
            if (this.onCheckedChanged !== undefined && this.onCheckedChanged !== null) this.onCheckedChanged(this, e);
        }

    }

}